<template>
	<div class="clearfloat padding-across-10" style="height:100%;margin-bottom: 100px" v-loading="loading" element-loading-text="拼命加载中">
		<el-row :gutter="5">
			<el-col :span="24" style="padding-bottom: 3px">
				<headerOpreate :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			</el-col>
			<el-col :span="24">
				<div class="bg-purple">
					<div class="panel-title">
						<span>设备码：{{this.templateObj.sn}}</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<el-table border style="width: 100%" :data="statusDatasArr">
						<el-table-column :show-overflow-tooltip="true" label="设备名" align="center">
							<template slot-scope="scope">
								<span>{{scope.row.Name}}<i class="el-icon-edit" style="margin-left: 5px;cursor: pointer;color: #50bfff" @click="changeDeviceName(scope.row)"></i></span>
							</template>
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="Sn"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="状态" align="center">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.State" type="success">
									<li class="el-icon-circle-check el-icon--left"></li>正在使用
								</el-tag>
								<el-tag v-else type="danger">
									<li class="el-icon-circle-close el-icon--left"></li>空闲
								</el-tag>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
			<el-col :span="isMobile ? 24 : 14" style="padding-top: 5px;">
				<div class="bg-purple">
					<div class="flash-object" v-loading="PCDevice.waitting">
						<template>
							<video-player class="vjs-custom-skin" ref="videoPlayer" :options="videoOptions" :playsinline="true" customEventName="customstatechangedeventname" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)">
							</video-player>
						</template>
					</div>
				</div>
			</el-col>
			<el-col :span="isMobile ? 24 : 10" style="padding-top: 5px;">
				<el-row>
					<el-col :span="24">
						<div class="bg-purple">
							<div class="panel-title">
								<span>电脑控制</span>
								<img class="title-img" v-bind:src="imgUrl">
							</div>
							<el-row :gutter="5">
								<el-col :span="12" style="margin-top: 3px;">
									<div class="grid-content1 bg-purple" v-loading="restartObj.waitting">
										<div class="detail-section">
											<div class="section-left">
												<div>
													<span style="font-weight: bold">远程控制</span>
												</div>
												<div>
													<i class="fa fa-gears" style="color: #EE7942;padding-top: 10px;font-size: 35px"></i>
												</div>
											</div>
											<div class="section-right" style="text-align: center">
												<div>
													<el-button :disabled="!templateObj.online" type="success" size="small" @click="restart">重启</el-button>
												</div>
												<div>
													<el-button :disabled="!templateObj.online" type="danger" size="small" @click="close">关机</el-button>
												</div>
											</div>
										</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="24">
						<div class="bg-purple">
							<div class="panel-title">
								<span>电脑参数</span>
								<img class="title-img" v-bind:src="imgUrl">
							</div>
							<el-row :gutter="5">
								<el-col :span="12" style="display: flex" v-for="item in cptDatas">
									<div style="margin-top: 5px;" class="grid-content1 bg-purple">
										<div class="detail-section2" style="height: 115px">
											<div class="section-bottom2" style="display: flex;text-align: left">
												<div class="section-bottom3" style="flex-direction: column;text-align:left;padding-left: 10px;padding-top: 17px">
													<div>
														<small>主机名:{{item.HostName?item.HostName:"未知"}}</small>
													</div>
													<div>
														<small>运行时长(S):{{runTime}}</small>
													</div>
													<div>
														<small>操作系统:{{item.OSVersion?item.OSVersion:"未知"}}</small>
													</div>
													<div>
														<small>系统:{{item.OSBit}}位</small>
													</div>
													<div>
														<small>服务版本:{{item.OSServiceVersion?item.OSServiceVersion:"未知"}}</small>
													</div>
												</div>
											</div>
										</div>
									</div>
								</el-col>
								<el-col :span="12" style="display: flex" v-for="item in cptDatas">
									<div style="margin-top: 5px;" class="grid-content1 bg-purple">
										<div class="detail-section2" style="height: 115px">
											<div class="section-bottom2" style="display: flex;text-align: left">
												<div class="section-bottom3" style="flex-direction: column;;text-align:left;padding-left: 10px;padding-top: 17px">
													<div>
														<small>总物理内存(GB):{{item.TotalPhysicalMemory}}</small>
													</div>
													<div>
														<small>空闲物理内存(GB):{{item.FreePhysicalMemory}}</small>
													</div>
													<div>
														<small>总虚拟内存(GB):{{item.TotalVirtualMemory}}</small>
													</div>
													<div>
														<small>空闲虚拟内存(GB):{{item.FreeVirtualMemory}}</small>
													</div>
													<div>
														<small>内存使用率(%):{{item.MemoryInUse}}</small>
													</div>
												</div>
											</div>
										</div>
									</div>
								</el-col>
								<el-col :span="12" style="display: flex" v-for="item in cptDatas">
									<div style="margin-top: 5px;" class="grid-content1 bg-purple">
										<div class="detail-section2" style="height: 95px">
											<div class="section-bottom2" style="display: flex;text-align: left">
												<div class="section-bottom3" style="flex-direction: column;;text-align:left;padding-left: 10px;padding-top: 20px;">
													<div>
														<small>处理器：{{item.ProcessorName?item.ProcessorName:"未知"}}</small>
													</div>
													<div>
														<small>处理器核心使用数:{{item.CpuUsed}}</small>
													</div>
												</div>
											</div>
										</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="24" style="padding-top: 5px;">
				<div class="bg-purple">
					<div class="panel-title">
						<span>网络参数</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<el-row :gutter="5">
						<el-col :span="8" style="display: flex;" v-for="item in netCardsDatas">
							<div style="margin-top: 5px;" class="grid-content1 bg-purple">
								<div class="detail-section2" style="height: 120px">
									<div class="section-bottom2" style="display: flex;text-align: left">
										<div class="section-bottom3" style="flex-direction: column;;text-align:left;padding-left: 10px;padding-top: 15px">
											<div>
												<small>网卡:{{item.Name?item.Name:'未知'}}</small>
											</div>
											<div>
												<small>类型:{{item.Type?item.Type:'未知'}}</small>
											</div>
											<div>
												<small>MAC地址:{{item.Mac?item.Mac:'未知'}}</small>
											</div>
											<div>
												<small>IP地址:
													<el-tag type="gray" v-for="subItem in item.Ip">{{subItem}}</el-tag>
												</small>
											</div>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="5">
			<el-col :span="24">
				<div class="bg-purple">
					<div class="panel-title">
						<span>磁盘信息</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<el-row :gutter="5">
						<el-col :span="4" style="display: flex" v-for="item in cptDiskDatas">
							<div style="margin-top: 5px;" class="grid-content1 bg-purple">
								<div class="detail-section2" style="height: 110px">
									<div class="section-bottom2" style="display: flex;text-align: left">
										<div class="section-bottom3" style="flex-direction: column;;text-align:left;padding-left: 10px">
											<div style="padding-top: 15px">
												<small style="font-weight: bold">{{item.Name}}</small>
											</div>
											<div>
												<small>硬盘容量(GB):{{item.TotalCapacity?item.TotalCapacity:'未知'}}</small>
											</div>
											<div>
												<small>空闲容量(GB):{{item.FreeCapacity?item.FreeCapacity:"未知"}}</small>
											</div>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<!-- 白板一体机状态 -->
		<el-row :gutter="5" v-if="isWhiteBoard">
			<el-col :span="24">
				<div class="bg-purple">
					<div class="panel-title">
						<span>白板一体机状态</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<el-row :gutter="5">
						<el-col :span="6" style="margin-top: 3px;">
							<div class="grid-content1 bg-purple" v-loading="sourceObj.waitting">
								<div class="detail-section">
									<div class="section-left">
										<div>
											<span style="font-weight: bold">开关控制</span>
										</div>
										<div>
											<i class="fa fa-gear" style="color: #EE7942;padding-top: 10px;font-size: 35px"></i>
										</div>
									</div>
									<div class="section-right" style="text-align: center">
										<div>
											<el-button :disabled="!templateObj.online" type="success" size="small" @click="restartBoard">重启</el-button>
										</div>
										<div>
											<el-button :disabled="!templateObj.online" type="danger" size="small" @click="shutDownBoard">关机</el-button>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" style="margin-top: 3px;">
							<div class="grid-content1 bg-purple" v-loading="lockObj.waitting">
								<div class="detail-section">
									<div class="section-left">
										<div>
											<span style="font-weight: bold">锁机操作</span>
										</div>
										<div>
											<i class="fa fa-lock" style="color: #EE7942;padding-top: 10px;font-size: 35px"></i>
										</div>
									</div>
									<div class="section-right" style="text-align: center">
										<div>
											<el-button :disabled="!templateObj.online" type="success" size="small" @click="lockBoard">锁机</el-button>
										</div>
										<div>
											<el-button :disabled="!templateObj.online" type="danger" size="small" @click="unLockBoard">解锁</el-button>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="12">
							<el-table border style="width: 100%;margin-top: 3px;" :data="boardStatusDatas">
								<el-table-column :show-overflow-tooltip="true" label="班级名称" align="center">
									<template slot-scope="scope">
										<span>{{scope.row.ClassName}}<i class="el-icon-edit" style="margin-left: 5px;cursor: pointer;color: #50bfff" @click="changeBoardName(scope.row)"></i></span>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="串口状态" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.SerialPort" type="success">
											<li class="el-icon-circle-check el-icon--left"></li>已打开
										</el-tag>
										<el-tag v-else type="gray">
											<li class="el-icon-circle-close el-icon--left"></li>未打开
										</el-tag>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<!-- 白板一体机外设 -->
		<el-row :gutter="5" v-if="isWhiteBoard">
			<el-col :span="24">
				<div class="bg-purple">
					<div class="panel-title">
						<span>白板一体机外设状态</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<el-row :gutter="5">
						<el-col :span="24">
							<el-table border style="width: 100%" :data="boardPeripheralStatusDatas">
								<el-table-column :show-overflow-tooltip="true" label="前置HDMI" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.HdmiInFront === 1" type="success">
											<li class="el-icon-circle-check el-icon--left"></li>插入
										</el-tag>
										<el-tag v-else type="gray">
											<li class="el-icon-circle-close el-icon--left"></li>拔出
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="OPS HDMI" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.HdmiInOPS === 1" type="success">
											<li class="el-icon-circle-check el-icon--left"></li>插入
										</el-tag>
										<el-tag v-else type="gray">
											<li class="el-icon-circle-close el-icon--left"></li>拔出
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="后置HDMI" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.HdmiInRear === 1" type="success">
											<li class="el-icon-circle-check el-icon--left"></li>插入
										</el-tag>
										<el-tag v-else type="gray">
											<li class="el-icon-circle-close el-icon--left"></li>拔出
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="HDMI输出" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.HdmiOut === 1" type="success">
											<li class="el-icon-circle-check el-icon--left"></li>插入
										</el-tag>
										<el-tag v-else type="gray">
											<li class="el-icon-circle-close el-icon--left"></li>拔出
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="音频插座" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.Aux === 1" type="success">
											<li class="el-icon-circle-check el-icon--left"></li>插入
										</el-tag>
										<el-tag v-else type="gray">
											<li class="el-icon-circle-close el-icon--left"></li>拔出
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="有线麦克风" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.Mic === 1" type="success">
											<li class="el-icon-circle-check el-icon--left"></li>插入
										</el-tag>
										<el-tag v-else type="gray">
											<li class="el-icon-circle-close el-icon--left"></li>拔出
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="前置USB" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.UsbFront === 1" type="success">
											<li class="el-icon-circle-check el-icon--left"></li>插入
										</el-tag>
										<el-tag v-else type="gray">
											<li class="el-icon-circle-close el-icon--left"></li>拔出
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="后置USB" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.UsbRear === 1" type="success">
											<li class="el-icon-circle-check el-icon--left"></li>插入
										</el-tag>
										<el-tag v-else type="gray">
											<li class="el-icon-circle-close el-icon--left"></li>拔出
										</el-tag>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<!-- 白板一体机读卡响应 -->
		<el-row :gutter="5" v-if="isWhiteBoard">
			<el-col :span="24">
				<div class="bg-purple">
					<div class="panel-title">
						<span>白板一体机读卡响应</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<el-row :gutter="5">
						<el-col :span="24" v-loading="getCardInfoObj.waitting">
							<el-table border style="width: 100%" :data="boardReadCardResponseDatas">
								<el-table-column :show-overflow-tooltip="true" label="卡片索引" align="center">
									<template slot-scope="scope">
										<el-select size="small" v-model="scope.row.Index" placeholder="请选择" @change="getCardInfo(scope.row)">
											<el-option v-for="item in scope.row.Totals" :key="item" :label="item" :value="item">
											</el-option>
										</el-select>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="卡号" align="center" prop="Uid"></el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="卡片类型" align="center">
									<template slot-scope="scope">
										<span v-if="scope.row.Type === 1">管理员卡</span>
										<span v-if="scope.row.Type === 2">普通用户卡</span>
										<span v-if="scope.row.Type === 3">系统用户卡</span>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="操作" align="center">
									<template slot-scope="scope">
										<el-button :disabled="!templateObj.online" type="primary" size="mini" @click="addCard">
											<li class="el-icon-plus el-icon--left"></li>添加
										</el-button>
										<el-button :disabled="!templateObj.online" type="danger" size="mini" @click="deleteCard(scope.row)">
											<li class="el-icon-delete2 el-icon--left"></li>删除
										</el-button>
										<el-button :disabled="!templateObj.online" type="danger" size="mini" @click="deleteAllCard">
											<li class="el-icon-eleg-icon_close el-icon--left"></li>清空
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<!-- 白板一体机当前卡 -->
		<el-row :gutter="5" v-if="isWhiteBoard">
			<el-col :span="24">
				<div class="bg-purple">
					<div class="panel-title">
						<span>白板一体机当前卡状态</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<el-row :gutter="5">
						<el-col :span="24">
							<el-table border style="width: 100%" :data="boardCurrentCardStatusDatas">
								<el-table-column :show-overflow-tooltip="true" label="登录名" align="center" prop="Uid"></el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="登录状态" align="center">
									<template slot-scope="scope">
										<span v-if="scope.row.Status === 0">当前感应区无卡，没有注册卡登录</span>
										<span v-if="scope.row.Status === 1">当前感应区无卡，管理员已登录</span>
										<span v-if="scope.row.Status === 2">当前感应区无卡，普通用户已登录</span>
										<span v-if="scope.row.Status === 128">当前感应区有未注册卡</span>
										<span v-if="scope.row.Status === 129">当前感应区有管理员卡</span>
										<span v-if="scope.row.Status === 130">当前感应区有普通用户卡</span>
										<span v-if="scope.row.Status === 143">当前感应区有多张卡，发生冲突错误</span>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="卡片物理类型" align="center">
									<template slot-scope="scope">
										<span v-if="scope.row.Protocol === 1">ISO14443A</span>
										<span v-if="scope.row.Protocol === 2">ISO14443B</span>
										<span v-if="scope.row.Protocol === 3">ISO15693</span>
										<span v-if="scope.row.Protocol === 128">EM4100(ID卡)</span>
										<span v-if="scope.row.Protocol === 255">未知类型</span>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<!-- 白板一体机投影机参数 -->
		<el-row :gutter="5" v-if="isWhiteBoard">
			<el-col :span="24">
				<div class="bg-purple">
					<div class="panel-title">
						<span>白板一体机投影机参数</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<el-row :gutter="5">
						<el-col :span="3" style="margin-top: 3px;">
							<div class="grid-content1 bg-purple" v-loading="boardProjectorObj.waitting">
								<div class="detail-section">
									<div class="section-left">
										<div>
											<span style="font-weight: bold">控制</span>
										</div>
										<div>
											<i class="fa fa-gear" style="color: #EE7942;padding-top: 10px;font-size: 35px"></i>
										</div>
									</div>
									<div class="section-right" style="text-align: center">
										<div>
											<el-button :disabled="!templateObj.online" type="success" size="small" @click="openBoardProjector">开启</el-button>
										</div>
										<div>
											<el-button :disabled="!templateObj.online" type="danger" size="small" @click="closeBoardProjector">关闭</el-button>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="21">
							<el-table border style="width: 100%;margin-top: 3px;" :data="boardProjectorStatusDatas">
								<el-table-column :show-overflow-tooltip="true" label="是否配置" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.IsConfig" type="success">已配置</el-tag>
										<el-tag v-else type="danger">未配置</el-tag>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="标识符" align="center" prop="Id"></el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="波特率" align="center" prop="Baudrate"></el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="数据位数" align="center">
									<template slot-scope="scope">
										<span v-if="scope.row.Databit === 0">8位</span>
										<span v-if="scope.row.Databit === 1">9位</span>
										<span v-if="scope.row.Databit === 2">5位</span>
										<span v-if="scope.row.Databit === 3">6位</span>
										<span v-if="scope.row.Databit === 4">7位</span>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="停止位数" align="center">
									<template slot-scope="scope">
										<span v-if="scope.row.Stopbit === 0">1位</span>
										<span v-if="scope.row.Stopbit === 1">0.5位</span>
										<span v-if="scope.row.Stopbit === 2">2位</span>
										<span v-if="scope.row.Stopbit === 3">1.5位</span>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="校验方式" align="center">
									<template slot-scope="scope">
										<span v-if="scope.row.Paritybit === 0">无效验</span>
										<span v-if="scope.row.Paritybit === 1">偶效验</span>
										<span v-if="scope.row.Paritybit === 2">奇效验</span>
									</template>
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="开机码" align="center" prop="Bootcode"></el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="关机码" align="center" prop="Shutdowncode"></el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="省电码" align="center" prop="Powercode"></el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="操作" align="center">
									<template slot-scope="scope">
										<el-button :disabled="!templateObj.online" type="primary" size="mini" @click="setProjector">
											<li class="el-icon-edit el-icon--left"></li>编辑
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<!-- 白板一体机多媒体状态 -->
		<el-row :gutter="5" v-if="isWhiteBoard">
			<el-col :span="24">
				<div class="bg-purple">
					<div class="panel-title">
						<span>白板一体机多媒体状态</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<el-row :gutter="5">
						<!-- HDMI输出通道 -->
						<el-col :span="6" style="display: flex">
							<div style="margin-top: 5px;" class="grid-content1 bg-purple" v-loading="hdmiSrcObj.waitting">
								<div class="detail-section" style="height: 110px">
									<div class="section-left" style="display: flex;text-align: center">
										<div>
											<h5>HDMI输出通道</h5>
										</div>
										<div>
											<i class="fa fa-microchip" style="font-size: 50px;color: #13ce66"></i>
										</div>
									</div>
									<div class="section-right" style="display: flex;text-align: left">
										<el-radio-group :disabled="!templateObj.online" v-model="boardMediaStatusDatas.Hdmi" @change="changeHDMISrc">
											<el-radio :label="0" style="width: 100px;margin-left: 15px">无输入</el-radio>
											<el-radio :label="1" style="width: 100px">OPS</el-radio>
											<el-radio :label="2" style="width: 100px">前置电脑</el-radio>
											<el-radio :label="3" style="width: 100px">后置电脑</el-radio>
										</el-radio-group>
									</div>
								</div>
							</div>
						</el-col>
						<!-- 声音信号源通道 -->
						<el-col :span="6" style="display: flex">
							<div style="margin-top: 5px;" class="grid-content1 bg-purple">
								<div class="detail-section" style="height: 110px">
									<div class="section-left" style="display: flex;text-align: center">
										<div>
											<h5>声音信号源通道</h5>
										</div>
										<div>
											<i class="fa fa-tasks" style="font-size: 50px;color: #13ce66"></i>
										</div>
									</div>
									<div class="section-right" style="display: flex;text-align: left">
										<el-radio-group disabled v-model="boardMediaStatusDatas.Audio">
											<el-radio :label="0" style="width: 100px;margin-left: 15px;">无输入</el-radio>
											<el-radio :label="1" style="width: 100px">OPS通道</el-radio>
											<el-radio :label="2" style="width: 100px">HDMI通道</el-radio>
											<el-radio :label="3" style="width: 100px">前置电脑</el-radio>
											<el-radio :label="4" style="width: 100px">后置电脑</el-radio>
										</el-radio-group>
									</div>
								</div>
							</div>
						</el-col>
						<!-- USB连接通道 -->
						<el-col :span="6" style="display: flex">
							<div style="margin-top: 5px;" class="grid-content1 bg-purple">
								<div class="detail-section" style="height: 110px">
									<div class="section-left" style="display: flex;text-align: center">
										<div>
											<h5>USB连接通道</h5>
										</div>
										<div>
											<i class="fa fa-usb" style="font-size: 50px;color: #13ce66"></i>
										</div>
									</div>
									<div class="section-right" style="display: flex;text-align: left">
										<el-radio-group disabled v-model="boardMediaStatusDatas.Usb">
											<el-radio :label="0" style="width: 100px;margin-left: 15px;">断开连接</el-radio>
											<el-radio :label="1" style="width: 100px">OPS</el-radio>
											<el-radio :label="2" style="width: 100px">前置电脑</el-radio>
											<el-radio :label="3" style="width: 100px">后置电脑</el-radio>
										</el-radio-group>
									</div>
								</div>
							</div>
						</el-col>
						<!-- 伴音音量 -->
						<el-col :span="6" style="display: flex">
							<div style="margin-top: 5px;" class="grid-content1 bg-purple" v-loading="controlVolumeObj.waitting">
								<div class="detail-section" style="height: 110px">
									<div class="section-left" style="display: flex;text-align: center">
										<div>
											<h5>伴音音量</h5>
										</div>
										<div>
											<i class="fa fa-volume-up" style="font-size: 50px;color: #13ce66"></i>
										</div>
									</div>
									<div class="section-right" style="display: flex;text-align: left;padding-top: 30px">
										<el-slider :disabled="!templateObj.online" style="width: 90%" :max="255" :min="0" v-model="boardMediaStatusDatas.Volume" @change="controlVolume"></el-slider>
									</div>
								</div>
							</div>
						</el-col>
						<!-- 麦克风音量 -->
						<el-col :span="6" style="display: flex">
							<div style="margin-top: 5px;" class="grid-content1 bg-purple" v-loading="controlMicVolumeObj.waitting">
								<div class="detail-section" style="height: 110px">
									<div class="section-left" style="display: flex;text-align: center">
										<div>
											<h5>麦克风音量</h5>
										</div>
										<div>
											<i class="fa fa-microphone" style="font-size: 50px;color: #13ce66"></i>
										</div>
									</div>
									<div class="section-right" style="display: flex;text-align: left;padding-top: 30px">
										<el-slider :disabled="!templateObj.online" style="width: 90%" :max="255" :min="0" v-model="boardMediaStatusDatas.Mic" @change="controlMicVolume"></el-slider>
									</div>
								</div>
							</div>
						</el-col>
						<!-- 静音 -->
						<el-col :span="6" style="display: flex">
							<div style="margin-top: 5px;" class="grid-content1 bg-purple">
								<div class="detail-section" style="height: 110px">
									<div class="section-left" style="display: flex;text-align: center">
										<div>
											<h5>静音状态</h5>
										</div>
										<div>
											<i class="el-icon-eleg-icon_vol-mute" style="font-size: 45px;color: #13ce66"></i>
										</div>
									</div>
									<div class="section-right" style="display: flex;text-align: left">
										<div>
											<span style="font-size: 10px;font-weight: bold">功放静音：</span>
											<el-tag v-if="boardMediaStatusDatas.AmpMute" type="success">已静音</el-tag>
											<el-tag v-else type="danger">未静音</el-tag>
										</div>
										<div>
											<span style="font-size: 10px;font-weight: bold">HDMI输出静音：</span>
											<el-tag v-if="boardMediaStatusDatas.HdmiMute" type="success">已静音</el-tag>
											<el-tag v-else type="danger">未静音</el-tag>
										</div>
										<div>
											<span style="font-size: 10px;font-weight: bold">麦克风静音</span>
											<el-tag v-if="boardMediaStatusDatas.MicMute" type="success">已静音</el-tag>
											<el-tag v-else type="danger">未静音</el-tag>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<!-- 修改名称 -->
		<el-dialog title="修改设备名称" v-model="renameDeviceDialog" :class="[dialog-tiny-width]" v-loading="changeNameObj.waitting">
			<el-form id="form" ref="changeNameForm" :model="changeNameForm" :rules="changeNameRules" label-width="100px">
				<el-form-item label="设备名称" prop="name">
					<el-input v-model="changeNameForm.name" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="renameDeviceDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmChangeName('changeNameForm')">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改名称 -->
		<el-dialog title="修改白板一体机名称" v-model="changeBoardNameDialog" :class="[dialog-tiny-width]" v-loading="changeBoardNameObj.waitting">
			<el-form id="form" ref="changeBoardNameForm" :model="changeBoardNameForm" :rules="changeBoardNameRules" label-width="130px">
				<el-form-item label="白板一体机名称" prop="ClassName">
					<el-input v-model="changeBoardNameForm.ClassName" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="changeBoardNameDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmChangeBoardName('changeBoardNameForm')">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改白板一体机投影机参数 -->
		<el-dialog title="白板一体机投影机设置" v-model="setProjectorDialog" :class="[dialog-tiny-width]" v-loading="setProjectorObj.waitting">
			<el-form id="form" ref="changeProjectorForm" :model="changeProjectorForm" :rules="changeProjectorRules" label-width="100px">
				<el-form-item label="标识符" prop="Id">
					<el-input v-model="changeProjectorForm.Id" required style="max-width:480px"></el-input>
				</el-form-item>
				<el-form-item label="波特率" prop="Baudrate">
					<el-input v-model="changeProjectorForm.Baudrate" required style="max-width:480px"></el-input>
				</el-form-item>
				<el-form-item label="数据位数" prop="Databit">
					<el-select style="width: 100%" v-model="changeProjectorForm.Databit" placeholder="请选择">
						<el-option label="8位" :value="0"></el-option>
						<el-option label="9位" :value="1"></el-option>
						<el-option label="5位" :value="2"></el-option>
						<el-option label="6位" :value="3"></el-option>
						<el-option label="7位" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="停止位数" prop="Stopbit">
					<el-select style="width: 100%" v-model="changeProjectorForm.Stopbit" placeholder="请选择">
						<el-option label="1位" :value="0"></el-option>
						<el-option label="0.5位" :value="1"></el-option>
						<el-option label="2位" :value="2"></el-option>
						<el-option label="1.5位" :value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="校验方式" prop="Paritybit">
					<el-select style="width: 100%" v-model="changeProjectorForm.Paritybit" placeholder="请选择">
						<el-option label="无校验" :value="0"></el-option>
						<el-option label="偶校验" :value="1"></el-option>
						<el-option label="奇校验" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="开机码" prop="Bootcode">
					<el-input v-model="changeProjectorForm.Bootcode" required style="max-width:480px"></el-input>
				</el-form-item>
				<el-form-item label="关机码" prop="Shutdowncode">
					<el-input v-model="changeProjectorForm.Shutdowncode" required style="max-width:480px"></el-input>
				</el-form-item>
				<el-form-item label="省电码" prop="Powercode">
					<el-input v-model="changeProjectorForm.Powercode" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="setProjectorDialog = false">取 消</el-button>
				<el-button type="primary" @click="conformSetProjector('changeProjectorForm')">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 添加注册卡 -->
		<el-dialog title="添加注册卡" v-model="addCardDialog" :class="[dialog-tiny-width]" v-loading="addCardObj.waitting">
			<el-form id="form" ref="addCardForm" :model="addCardForm" :rules="addCardRules" label-width="100px">
				<el-form-item label="卡号" prop="Uid">
					<el-input v-model="addCardForm.Uid" required style="max-width:480px"></el-input>
				</el-form-item>
				<el-form-item label="卡片类型" prop="Type">
					<el-select style="width: 100%" v-model="addCardForm.Type" placeholder="请选择">
						<el-option label="管理员卡" :value="1"></el-option>
						<el-option label="普通用户卡" :value="2"></el-option>
						<el-option label="系统用户卡" :value="3"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addCardDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmAddCard('addCardForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery';
	import swf from '../../../../assets/js/swfobject.js'
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import { Animation } from '../../../../assets/js/common.js'
	import imgDefault from '../../../../assets/images/title-right.png'

	import { videoPlayer } from 'vue-video-player'
	require('videojs-flash/dist/videojs-flash')
	require('video.js/dist/video-js.css')
	require('vue-video-player/src/custom-theme.css')

	var that = null;
	window['StartPlay'] = function(id) {
		//console.log(id);
		if(that) {
			//开始预览
			that.handleStartPlay(id);
		} else {
			console.error(that.$t('message.initializeFailed'));
		}
	}
	window['StopPlay'] = function(id) {
		if(that) {
			//停止预览
			that.handleStopPlay(id);
		} else {
			console.error(that.$t('message.initializeFailed'));
		}
	}
	window["recordGId"] = "";
	export default {
		components: {
			headerOpreate,
			videoPlayer
		},
		data() {
			var create_CardId = (rule, value, callback) => {
				if(this.addCardForm.Uid === '') {
					callback(new Error('请输入卡号'));
				}
				else if(!((/^[0-9a-fA-F]{1,}$/).test(this.addCardForm.Uid))) {
					callback(new Error('卡号须为十六进制数'));
				} 
				else {
					callback();
				}
			};
			var checkProjectorId = (rule, value, callback) => {
				if(this.changeProjectorForm.Id != '' && !((/^[0-9a-fA-F]{1,}$/).test(this.changeProjectorForm.Id))) {
					callback(new Error('标识符须为十六进制数'));
				} 
				else {
					callback();
				}
			}; 
			var checkProjectorBaudrate = (rule, value, callback) => {
				if(this.changeProjectorForm.Baudrate != '' && !((/^[0-9a-fA-F]{1,}$/).test(this.changeProjectorForm.Baudrate))) {
					callback(new Error('波特率须为十六进制数'));
				} 
				else {
					callback();
				}
			}; 
			var checkProjectorBootcode = (rule, value, callback) => {
				if(this.changeProjectorForm.Bootcode != '' && !((/^[0-9a-fA-F]{1,}$/).test(this.changeProjectorForm.Bootcode))) {
					callback(new Error('开机码须为十六进制数'));
				} 
				else {
					callback();
				}
			};
			var checkProjectorShutdowncode = (rule, value, callback) => {
				if(this.changeProjectorForm.Shutdowncode != '' && !((/^[0-9a-fA-F]{1,}$/).test(this.changeProjectorForm.Shutdowncode))) {
					callback(new Error('关机码须为十六进制数'));
				} 
				else {
					callback();
				}
			}; 
			var checkProjectorPowercode = (rule, value, callback) => {
				if(this.changeProjectorForm.Powercode != '' && !((/^[0-9a-fA-F]{1,}$/).test(this.changeProjectorForm.Powercode))) {
					callback(new Error('省电码须为十六进制数'));
				} 
				else {
					callback();
				}
			};  
			return {
				ckUrl: '',
				imgUrl: imgDefault,
				statusDatasArr: [],
				cptDatas: [],
				cptDiskDatas: [],
				netCardsDatas: [],
				//白板一体机数据
				isWhiteBoard: false,//是否为白板一体机
				boardStatusDatas: [],// 白板一体机状态
				boardMediaStatusDatas: {},// 白板一体机多媒体状态
				boardPeripheralStatusDatas: [],// 白板一体机外设状态
				boardCurrentCardStatusDatas: [],// 白板一体机当前卡状态
				boardProjectorStatusDatas: [],// 白板一体机投影机参数
				boardReadCardResponseDatas: [],//白板一体机读卡响应
				runTime: '',
				renameDeviceDialog: false,
				changeNameObj: {
					waitting: false
				},
				changeNameForm: {
					name: '',
				},
				changeNameRules:{
					name: [
					{ required: true, message: '请输入设备名称', trigger: 'blur' }
					],
				},
				restartObj: {
					waitting: false
				},
				PCDevice: {
					waitting: false
				},
				videoOptions: {},
				//白板一体机操作waitting
				lockObj: {
					waitting: false
				},
				sourceObj: {
					waitting: false
				},
				boardProjectorObj: {
					waitting: false
				},
				controlVolumeObj: {
					waitting: false
				},
				controlMicVolumeObj: {
					waitting: false
				},
				hdmiSrcObj: {
					waitting: false
				},
				setProjectorDialog: false,//修改投影机参数
				changeProjectorForm: {},
				changeProjectorRules: {
					Id: [{
						validator: checkProjectorId,
						required: false,
						trigger: 'blur'
					}],
					Baudrate: [{
						validator: checkProjectorBaudrate,
						required: false,
						trigger: 'blur'
					}],
					Bootcode: [{
						validator: checkProjectorBootcode,
						required: false,
						trigger: 'blur'
					}],
					Shutdowncode: [{
						validator: checkProjectorShutdowncode,
						required: false,
						trigger: 'blur'
					}],
					Powercode: [{
						validator: checkProjectorPowercode,
						required: false,
						trigger: 'blur'
					}]
				},
				setProjectorObj: {
					waitting: false
				},
				addCardDialog: false,//添加注册卡
				addCardObj: {
					waitting: false
				},
				addCardForm:{
					Uid:'',
					Type: 1
				},
				addCardRules: {
					Uid:  [{
						validator: create_CardId,
						required: true,
						trigger: 'blur'
					}]
				},
				getCardInfoObj: {
					waitting: false
				},
				changeBoardNameDialog: false,
				changeBoardNameForm: {},
				changeBoardNameObj: {
					waitting: false
				},
				changeBoardNameRules:{
					ClassName: [
					{ required: true, message: '请输入名称', trigger: 'blur' }
					],
				},

				// ipValue:'',
				isReload: false,
				opreateDatas: [{
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadDatas'
				}, {
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_cogs el-icon--left',
					name: '远程协助',
					action: 'remoteAssistance'
				}]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		mounted() {
			//			console.log('this is current videojs instance object', this.myVideoPlayer)
		},
		computed: {
			player() {
				return this.$refs.videoPlayer.player
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			onPlayerPlay(player) {
				//console.log('player play!', player)
				this.handleStartPlay(this.templateObj.sn);
			},
			onPlayerPause(player) {
				//console.log('player pause!', player)
				this.handleStopPlay(this.templateObj.sn);
			},
			playerStateChanged(playerCurrentState) {
				//console.log('player current update state', playerCurrentState)
			},

			playerReadied(player) {
				//console.log('the player is readied', player)
			},

			//修改设备名称
			changeDeviceName(row) {
				this.renameDeviceDialog = true;
				this.changeNameForm.name = row.Name;
			},
			//确定修改名称
			confirmChangeName(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.$confirm('此操作将修改设备名称，是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.changeNameObj.waitting = true
							HttpServer.httpPost.call(this, '/Api/PC/PCOperation', {
								sns: [this.templateObj.sn],
								Op: 5,
								name: this.changeNameForm.name,
								UserId: parseInt(GloabFun.getKeyId())
							}, function(response) {}, function(response) {
								this.changeNameObj.waitting = false;
								if(response.data.response.length > 0) {
									if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
										this.$notify({
											title: '成功',
											message: this.$t('message.operationSuccess'),
											type: 'success',
											duration: 2500
										});
										this.$emit('changeView', 'List', this.templateObj);
									} else {
										this.$notify.error({
											title: '错误',
											message: response.data.response[0].msg,
											duration: 2500
										});
									}
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							})
						}).catch(() => {
							this.$notify.info({
								title: '消息',
								message: this.$t('message.operationCanceled'),
								duration: 2500
							})
						});
					} else {
						return false;
					}
				})
			},
			//重启
			restart() {
				this.$confirm('此操作将重启该设备，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.restartObj.waitting = true;
					HttpServer.httpPost.call(this, '/Api/PC/PCOperation', {
						sns: [this.templateObj.sn],
						Op: 3,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.restartObj.waitting = false;
						if(response.data.response.length > 0) {
							if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
								this.$notify({
									title: '成功',
									message: this.$t('message.operationSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.response[0].msg,
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: this.$t('message.operationFailed'),
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//关闭
			close() {
				this.$confirm('此操作将关闭该设备，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.restartObj.waitting = true
					HttpServer.httpPost.call(this, '/Api/PC/PCOperation', {
						sns: [this.templateObj.sn],
						Op: 2,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.restartObj.waitting = false;
						if(response.data.response.length > 0) {
							if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
								this.$notify({
									title: '成功',
									message: this.$t('message.operationSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.response[0].msg,
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: this.$t('message.operationFailed'),
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//远程协助
			remoteAssistance() {
				this.$confirm('此操作将打开该电脑上的TeamViewer软件，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					HttpServer.httpPost.call(this, '/Api/PC/PCOperation', {
						sns: [this.templateObj.sn],
						Op: 4,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.loading = false;
						if(response.data.response.length > 0) {
							if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
								this.$notify({
									title: '成功',
									message: '对方电脑软件已打开，请用本机相关软件进行连接。',
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: 'TeamViewer软件打开失败或未安装',
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message:'TeamViewer软件打开失败或未安装',
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			handleStartPlay(id) {
				//开始预览处理
				var entry = {
					Op: 0,
					sns: [id],
					UserId: parseInt(GloabFun.getKeyId())
				}
				// console.log(entry)
				//				this.PCDevice.waitting = true;
				HttpServer.httpPost.call(this, '/Api/PC/PCOperation', entry, function(response) {}, function(response) {
					//					this.PCDevice.waitting = false;
					// console.log('开始预览',response)
					if(response.data.code === 0) {
						//每隔4分钟调用一次接口
						this.PCHeartBeat = setInterval(() => {
							HttpServer.httpPost.call(this, '/Api/Device/PreviewHeartbeat', {
								sn: [this.templateObj.sn]
							}, function(response) {}, function(response) {
								//					console.log(response)
							})
						}, 240000)
					}
				});
			},
			handleStopPlay(id) {
				//停止预览处理
				var entry = {
					Op: 1,
					sns: [id],
					UserId: parseInt(GloabFun.getKeyId())
				}
				HttpServer.httpPost.call(this, '/Api/PC/PCOperation', entry, function(response) {}, function(response) {

				});
			},


			/**
			*  白板一体机控制
			**/
			//修改名称
			changeBoardName(row) {
				this.changeBoardNameForm = row;
				this.changeBoardNameDialog = true;
			},
			//确认修改白板一体机名称
			confirmChangeBoardName(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.$confirm('此操作将修改白板一体机名称，是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.changeBoardNameObj.waitting = true
							HttpServer.httpPost.call(this, '/Api/WhiteBoard/Update/ClassName', {
								sns: [this.changeBoardNameForm.Sn],
								classname: this.changeBoardNameForm.ClassName,
								UserId: parseInt(GloabFun.getKeyId())
							}, function(response) {}, function(response) {
								this.changeBoardNameObj.waitting = false;
								this.changeBoardNameDialog = false;
								if(response.data.code === 0){
									if(response.data.response.length > 0) {
										if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
											this.$notify({
												title: '成功',
												message: this.$t('message.operationSuccess'),
												type: 'success',
												duration: 2500
											});
										} else {
											this.$notify.error({
												title: '错误',
												message: response.data.response[0].msg,
												duration: 2500
											});
										}
									} else {
										this.$notify.error({
											title: '错误',
											message: '操作无响应',
											duration: 2500
										});
									}
								}else{
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
								this.getPCDeviceDetail();
							})
						}).catch(() => {
							this.$notify.info({
								title: '消息',
								message: this.$t('message.operationCanceled'),
								duration: 2500
							})
						});
					} else {
						return false;
					}
				})
			},
			//白板一体机重启
			restartBoard() {
				this.$confirm('此操作将对白板一体机设备进行重启操作，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.sourceObj.waitting = true
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Control/Computer', {
						sns: [this.templateObj.sn],
						Operation: 1,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.sourceObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//白板一体机关机
			shutDownBoard() {
				this.$confirm('此操作将对白板一体机设备进行关机操作，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.sourceObj.waitting = true
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Control/Computer', {
						sns: [this.templateObj.sn],
						Operation: 0,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.sourceObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//白板一体机锁机
			lockBoard() {
				this.$confirm('此操作将对白板一体机设备进行锁机操作，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.lockObj.waitting = true
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Control/Computer', {
						sns: [this.templateObj.sn],
						Operation: 2,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.lockObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//白板一体机解锁
			unLockBoard() {
				this.$confirm('此操作将对白板一体机设备进行解锁操作，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.lockObj.waitting = true
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Control/Computer', {
						sns: [this.templateObj.sn],
						Operation: 3,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.lockObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//白板一体机投影机开启
			openBoardProjector() {
				this.$confirm('此操作将开启白板一体机投影机，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.boardProjectorObj.waitting = true
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Control/Projector', {
						sns: [this.templateObj.sn],
						op: 1,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.boardProjectorObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//白板一体机投影机关闭
			closeBoardProjector() {
				this.$confirm('此操作将关闭白板一体机投影机，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.boardProjectorObj.waitting = true
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Control/Projector', {
						sns: [this.templateObj.sn],
						op: 0,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.boardProjectorObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//控制伴音音量
			controlVolume() {
				this.$confirm('此操作将调节白板一体机伴音音量，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.controlVolumeObj.waitting = true
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Control/AudioVolumn', {
						sns: [this.templateObj.sn],
						volumn: this.boardMediaStatusDatas.Volume,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.controlVolumeObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//控制麦克风音量
			controlMicVolume() {
				this.$confirm('此操作将调节白板一体机麦克风音量，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.controlMicVolumeObj.waitting = true;
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Control/MicVolumn', {
						sns: [this.templateObj.sn],
						volumn: this.boardMediaStatusDatas.Mic,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.controlMicVolumeObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//切换HDMI信号源
			changeHDMISrc() {
				this.$confirm('此操作将切换HDMI输出信道，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.hdmiSrcObj.waitting = true;
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Update/HDMISrc', {
						sns: [this.templateObj.sn],
						hdmisrc: this.boardMediaStatusDatas.Hdmi,
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.hdmiSrcObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//修改投影机参数
			setProjector() {
				this.changeProjectorForm = this.boardProjectorStatusDatas[0];
				this.setProjectorDialog = true;
			},
			//确认修改投影机参数
			conformSetProjector(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.$confirm('此操作将调节白板一体机投影机相关参数，是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.setProjectorObj.waitting = true;
							HttpServer.httpPost.call(this, '/Api/WhiteBoard/Update/WBProjector', {
								sn: this.changeProjectorForm.Sn,
								id: this.changeProjectorForm.Id,
								baudrate: this.changeProjectorForm.Baudrate,
								databit: this.changeProjectorForm.Databit,
								stopbit: this.changeProjectorForm.Stopbit,
								paritybit: this.changeProjectorForm.Paritybit,
								bootcode: this.changeProjectorForm.Bootcode,
								shutdowncode: this.changeProjectorForm.Shutdowncode,
								powercode: this.changeProjectorForm.Powercode,
								UserId: parseInt(GloabFun.getKeyId())
							}, function(response) {}, function(response) {
								this.setProjectorObj.waitting = false;
								this.setProjectorDialog = false;
								if(response.data.code === 0){
									if(response.data.response.length > 0) {
										if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
											this.$notify({
												title: '成功',
												message: this.$t('message.operationSuccess'),
												type: 'success',
												duration: 2500
											});
										} else {
											this.$notify.error({
												title: '错误',
												message: response.data.response[0].msg,
												duration: 2500
											});
										}
									} else {
										this.$notify.error({
											title: '错误',
											message: '操作无响应',
											duration: 2500
										});
									}
								}else{
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
								this.getPCDeviceDetail();
							})
						}).catch(() => {
							this.$notify.info({
								title: '消息',
								message: this.$t('message.operationCanceled'),
								duration: 2500
							})
						});
					}else {
						return false;
					}
				})
			},
			//添加注册卡
			addCard() {
				this.addCardDialog = true;
			},
			//确认添加注册卡
			confirmAddCard(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.$confirm('此操作将添加该注册卡，是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.addCardObj.waitting = true;
							HttpServer.httpPost.call(this, '/Api/WhiteBoard/Add/Card', {
								cardid: this.addCardForm.Uid,
								type: this.addCardForm.Type,
								sns: [this.templateObj.sn],
								UserId: parseInt(GloabFun.getKeyId())
							}, function(response) {}, function(response) {
								this.addCardObj.waitting = false;
								this.addCardDialog = false;
								if(response.data.code === 0){
									if(response.data.response.length > 0) {
										if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
											this.$notify({
												title: '成功',
												message: this.$t('message.operationSuccess'),
												type: 'success',
												duration: 2500
											});
											this.getPCDeviceDetail();
										} else {
											this.$notify.error({
												title: '错误',
												message: response.data.response[0].msg,
												duration: 2500
											});
										}
									} else {
										this.$notify.error({
											title: '错误',
											message: '操作无响应',
											duration: 2500
										});
									}
								}else{
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
								this.getPCDeviceDetail();
							})
						}).catch(() => {
							this.$notify.info({
								title: '消息',
								message: this.$t('message.operationCanceled'),
								duration: 2500
							})
						});
					} else {
						return false;
					}
				})
			},
			//删除注册卡
			deleteCard(row) {
				this.$confirm('此操作将删除该注册卡，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.getCardInfoObj.waitting = true;
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Delete/Card', {
						cardid: row.Uid,
						sns: [row.Sn],
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.getCardInfoObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
									this.getPCDeviceDetail();
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
						this.getPCDeviceDetail();
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//清空所有注册卡
			deleteAllCard() {
				this.$confirm('此操作将删除所有注册卡，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.getCardInfoObj.waitting = true;
					HttpServer.httpPost.call(this, '/Api/WhiteBoard/Clear/AllCard', {
						sns: [this.templateObj.sn],
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						this.getCardInfoObj.waitting = false;
						if(response.data.code === 0){
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
									this.getPCDeviceDetail();
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: '操作无响应',
									duration: 2500
								});
							}
						}else{
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//查询注册卡
			getCardInfo(index) {
				this.getCardInfoObj.waitting = true;
				HttpServer.httpPost.call(this, '/Api/WhiteBoard/Read/Card', {
					index: index.Index - 1,
					sns: [this.templateObj.sn],
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					this.getCardInfoObj.waitting = false;
					if(response.data.code === 0){
						if(response.data.response.length > 0) {
							if(response.data.response[0].sn == this.templateObj.sn && response.data.response[0].code === 0) {
								this.$notify({
									title: '成功',
									message: this.$t('message.operationSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.response[0].msg,
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: '操作无响应',
								duration: 2500
							});
						}
					}else{
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.getPCDeviceDetail();
				})
			},



			reloadDatas() {
				this.isReload = true;
				this.getPCDeviceDetail();
			},
			//获取监控详情
			getPCDeviceDetail() {
				HttpServer.httpPost.call(this, '/Api/PC/AllInfo', {
					sn: this.templateObj.sn
				}, function(response) {}, function(response) {
					this.videoOptions = {
						techOrder: ['flash'], // 兼容顺序
						muted: true,
						playbackRates: [0.7, 1.0, 1.5, 2.0],
						sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
							type: "rtmp/mp4",
							src: response.data.config.Rtmp
						}],
						language: 'zh-CN',
						controls: true,
						autoplay: true,
					}

					//推流成功之后查询一次心跳包
					HttpServer.httpPost.call(this, '/Api/Device/PreviewHeartbeat', {
						sn: [this.templateObj.sn]
					}, function(response) {}, function(response) {
						this.handleStartPlay(this.templateObj.sn);
					})

					if(response.data.code === 0) {
						this.statusDatasArr = [];
						this.cptDatas = [];
						this.cptDiskDatas = [];
						response.data.status.Name = this.templateObj.name;
						this.statusDatasArr.push(response.data.status);
						this.cptDatas.push(response.data.config.info);
						this.cptDiskDatas = response.data.config.info.Disks;
						this.runTime = response.data.config.Time;
						this.netCardsDatas = response.data.netconfig.NetCards;
						//若为白板，则查找白板信息
						this.isWhiteBoard = response.data.config.IWB;
						if(this.isWhiteBoard){
							this.boardStatusDatas = [response.data.boardstatus];
							this.boardMediaStatusDatas = response.data.boardmediastatus;
							this.boardPeripheralStatusDatas = [response.data.boardperipheralstatus];
							this.boardCurrentCardStatusDatas = [response.data.boardcurrentcardstatus];
							this.boardProjectorStatusDatas = [response.data.boardprojectorstatus];

							//读卡响应由Total生成对应的数字数组
							var totals = [];
							for(var i = 0 ; i < response.data.boardreadcardresponse.Total; i ++){
								totals[i] = i + 1;
							}
							response.data.boardreadcardresponse.Totals = totals;
							response.data.boardreadcardresponse.Index = response.data.boardreadcardresponse.Index + 1;
							this.boardReadCardResponseDatas = [response.data.boardreadcardresponse];
						}
						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			}
		},
		created() {
			this.getPCDeviceDetail();
		},
		beforeDestroy() {
			clearInterval(this.PCHeartBeat);
			this.handleStopPlay(this.templateObj.sn);
		},
	}
</script>

<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@import '../../../../assets/css/media-screen.less';
</style>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
	/*.flash-object {
		height: 390px;
	}*/
	
	.el-row {
		margin-bottom: 5px;
		.bg-purple {
			width: 100%;
			.detail-title {
				text-align: center;
				i {
					font-size: 40px;
				}
			}
			.middle-section {
				width: 100%;
				display: flex;
				.middle-bg {}
			}
			.icon-default {
				color: #999999;
			}
			.panel-title {
				width: 100%;
				height: 25px;
				color: white;
				// background-color: rgba(32,160,255,.2);
				background-color: #20A0FF;
				border-radius: 3px;
				// border-bottom: 1px solid #20A0FF;
				line-height: 25px;
				padding-left: 10px;
				.title-img {
					width: 30%;
					float: right;
					height: 100%;
					width: 100px
				}
			}
			.detail-section {
				width: 100%;
				height: 80px;
				display: flex;
				justify-content: space-around;
				.section-left {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					width: 40%;
					padding: 3px;
					height: 100%;
				}
				.section-right {
					text-align: left;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					// align-items: center;
					width: 60%;
					padding: 3px;
					// padding-left: 6px;
					height: 100%;
				}
			}
			.detail-section2 {
				width: 100%;
				height: 70px;
				// display: flex;
				flex-direction: column;
				justify-content: space-around;
				.section-top2 {
					// display: flex;
					// flex-direction: column;
					justify-content: space-around;
					// border-bottom: 1px solid #B0B0B0;
					// align-items: center;
					text-align: center;
					padding-top: 2px;
					width: 100%;
					height: 25px;
					line-height: 25px;
				}
				.section-bottom2 {
					// text-align: center;
					display: flex;
					// flex-direction: column;
					justify-content: space-around;
					// align-items: center;
					// width: 100%;
					padding-top: 5px;
					height: 75%;
					.section-bottom3 {
						// border: 1px solid #B0B0B0;
						display: flex;
						// flex-direction: column;
						justify-content: space-around;
						// align-items: center;
						// width: 40%;
						height: 100%;
						padding: 0 5px;
					}
				}
			}
		}
	}
	
	.grid-content {
		border: 1px solid #FFFFFF;
		height: 400px;
	}
	
	.grid-content1 {
		box-shadow: 0 1px 4px #000;
		border-radius: 5px;
		margin-top: 1px;
		height: 100%;
	}
</style>